<template>
	<view class="order-details">
		<view class="order-status">
			<text class="status-title">
				<text>{{statusList[status]}}</text>
				<uni-icons color="#fff" type="right" size="45rpx"></uni-icons> </text>
			<text class="status-subtitle" v-if="status===0">库存有限，请尽快完成付款，过时将自动取消</text>
		</view>
		<view :class="status===0?'main':'main2'">
			<view class="between" v-if="status===0||status==1">
				<view class="flex-space-between">
					<view class="flex-space-between-title"><uni-icons color="#007aff" type="checkbox"
							size="45rpx"></uni-icons> 随买随用</view>
					<view class="flex-space-between-title"><uni-icons color="#007aff" type="checkbox"
							size="45rpx"></uni-icons> 随时退</view>
					<view class="flex-space-between-title"><uni-icons color="#007aff" type="checkbox"
							size="45rpx"></uni-icons> 过期退</view>
				</view>

				<view class="remaining-time" v-if="status===0">剩余时间&nbsp;<uni-countdown :font-size="11" color="red"
						:show-day="false" :hour="1" :minute="0" :second="0" /></view>
				<view class="flex-space-between-btn" v-if="status===0">
					<button size="mini" class="cancel-order" @click="cancelOrder">取消订单</button>
					<button size="mini" class="pay-order" @click="payOrder">去支付</button>
				</view>
				<view class="flex-space-between-btn" v-if="status===1">
					<button size="mini" class="cancel-order">退订</button>
				</view>
			</view>
			<view class="next " v-else>
				<text>期待您的下次光临</text>
				<button size="mini" v-if="status===2" class="go-evaluate flex-space-between-btn">去评价</button>

			</view>
			<view class="order-payment" v-if="status===0">
				<view class="payment-title">
					<text class="payment-title1">在线支付 <text class="payment-title2">¥60</text></text>
					<text class="payment-title3">费用明细</text>
				</view>
				<text class="order-number">订单号 {{ orderNumber }}&nbsp;<uni-icons color="#828282" type="compose"
						size="30rpx"></uni-icons></text>
			</view>
			<view class="order-info">
				<view class="info-title"><text>故宫博物馆学生票 x2份 </text><uni-icons type="right" size="30rpx"></uni-icons>
				</view>
				<view class="info-date">使用日期：<text class='info-date-time'>2098-11-26 星期六</text> </view>
				<text class="info-voucher" v-if="status===0||status==1">凭「电子凭证」直接验证使用</text>
				<view class="info-voucher-box" v-if="status===0||status==1">
					<view class="info-voucher-left">
						<view v-if="status===0">凭证</view>
						<view v-else>使用凭证</view>
					</view>
					<view class="info-voucher-right">
						<view v-if="status===0" class="info-voucher-right-title">凭证将在订单确认后发放</view>
						<view v-else class="qr-code-box">
							<view>
								辅助码:1234567890
							</view>
							<image class="info-voucher-right-img" src="/static/lyyImages/u3330.png" mode=""></image>
							<view class="save-img">
								保存到相册
							</view>
						</view>
					</view>
				</view>
				<view class="ticket-info" v-if="status===0||status==1">
					<text class="ticket-title">取票、入园时间/地址</text>
					<text class="ticket-time">08:30-16:30</text>
					<view class="ticket-address"><text>故宫博物馆售票处</text><text class="copy">复制</text> </view>
				</view>
				<view class="refund-policy" v-if="status===0||status==1">
					<view class="policy-title">
						<view>退改规则</view> <uni-icons type="down" size="30rpx"></uni-icons>
					</view>
					<text class="policy-detail">
						<text class="policy-detail1">无忧退</text>
						随时退·过期自动退</text>
				</view>
			</view>

			<view class="insurance-info">
				<view class="insurance-title">
					<view class="">
						景区意外险（含新冠保障）x2份
					</view>
					<view class="">
						<uni-icons type="right" size="30rpx"></uni-icons>
					</view>
				</view>
			</view>
			<view class="order-payment" v-if="status!=0">
				<view class="payment-title">
					<text class="payment-title1">在线支付 <text class="payment-title2">¥60</text></text>
					<text class="payment-title3">费用明细</text>
				</view>
				<text class="order-number">订单号 {{ orderNumber }}&nbsp;<uni-icons color="#828282" type="compose"
						size="30rpx"></uni-icons></text>
			</view>
			<view class="booking-info">
				<view class="booking-title">预订信息</view>
				<view class="booking-name">
					<view class="booking-left">
						出行人
					</view>
					<view class="booking-right">
						张三哥
					</view>
				</view>
				<view class="booking-contact">
					<view class="booking-left">
						联系信息
					</view>
					<view class="booking-right">
						张三哥 136****5678
					</view>
				</view>
				<view class="booking-contract">
					<view class="booking-left">
						合同条款
					</view>
					<view class="booking-right ">
						<view class="">
							电子合同
						</view>
						<text class="details">详情</text>
					</view>
				</view>
			</view>
			<view class="attraction-info">
				<view class="attraction-title-box">
					<image src="/static/lyyImages/下载.png" mode="" class="attraction-info-img"></image>
					<text class="attraction-title">故宫博物馆</text>
				</view>
				<navigator url="/path/to/attraction" class="attraction-detail">景点详情
					<uni-icons type="right" size="30rpx"></uni-icons>
				</navigator>
			</view>
		</view>

	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue';
	const status = ref(3)
	const statusTitle = ref('')
	const statusList = ['待支付', '未使用', '已使用', '已退订/已取消']
	const orderNumber = '291125173310086'

	function cancelOrder() {
		// Logic to cancel the order
		console.log('Cancel order');
	}

	function payOrder() {
		// Logic to pay the order
		console.log('Pay order');
	}
</script>

<style scoped>
	:deep(.uni-page-head) {
		background: linear-gradient(110deg, #007aff, #1acaff);
	}

	button {
		background-color: #fff;
	}

	.order-details {
		background-color: #f5f5f5;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.order-status {
		border-top: 1rpx #fff solid;
		width: 100%;
		display: flex;
		flex-direction: column;
		background: linear-gradient(70deg, #007aff, #1acaff);
		color: #fff;
		padding: 50rpx 50rpx 100rpx 50rpx;

	}

	.main {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		position: absolute;
		top: 210rpx;

	}

	.main2 {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		position: absolute;
		top: 140rpx;
	}


	.status-title {
		font-size: 50rpx;
		margin-left: 50rpx;
		line-height: 80rpx;
	}

	.status-subtitle {
		margin-top: 20rpx;
		font-size: 25rpx;
		margin-left: 50rpx;
	}

	.flex-space-between {
		display: flex;
		/* margin-top: 20rpx; */
		font-size: 30rpx;
	}

	.flex-space-between-title {
		display: flex;
		align-items: center;
		margin-right: 20rpx;
	}

	.between {
		background-color: #fff;
		padding: 16px;
		border-radius: 8px;
	}

	.remaining-time {
		display: block;
		padding: 20rpx;
		display: flex;
		font-size: 30rpx;
		color: #828282;
	}

	.cancel-order,
	.pay-order,
	.go-evaluate {
		width: 220rpx;
		margin-right: 30rpx;
		cursor: pointer;
		font-size: 30rpx;
	}

	.go-evaluate {
		margin: 0;
	}

	.cancel-order {
		background-color: #fff;
	}

	.pay-order {
		background: linear-gradient(130deg, #007aff, #1acaff);
		color: #fff;
	}

	.between,
	.order-payment,
	.order-info,
	.insurance-info,
	.booking-info,
	.attraction-info,
	.next {
		width: 80%;
		background-color: #fff;
		padding: 30rpx;
		border-radius: 20rpx;
		margin-bottom: 30rpx;
	}

	.payment-title,
	.order-number,
	.info-title,
	.info-date,
	.info-voucher,
	.ticket-title,
	.ticket-time,
	.ticket-address,
	.policy-title,
	.policy-detail,
	.booking-title,
	.booking-name,
	.booking-contact,
	.booking-contract {
		display: block;
		margin-bottom: 20rpx;
	}

	.payment-title {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.payment-title1 {
		font-size: 35rpx;
		font-weight: 600;
	}

	.payment-title2 {
		font-size: 35rpx;
		color: red;
		font-weight: normal;
	}

	.payment-title3 {
		font-size: 25rpx;
		color: #007aff;
	}

	.order-number {
		font-size: 25rpx;
		color: #828282;
	}


	.next {
		display: flex;
		flex-direction: column;
		font-size: 30rpx;
		color: #828282;
	}


	.info-title {
		font-size: 30rpx;
	}

	.info-date {
		font-size: 25rpx;
		color: #828282;
	}

	.info-date-time {
		color: #ffa011;
	}

	.info-voucher {
		font-size: 30rpx;
	}

	.info-voucher-box {
		background-color: #fafafa;
		border-radius: 20rpx;
		display: flex;
		font-size: 30rpx;
		overflow: hidden;
		/* height: 300rpx; */
	}


	.info-voucher-left {
		padding: 50rpx 0rpx;
		width: 70rpx;
		background-color: #333333;
		color: #fff;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.info-voucher-left view {
		writing-mode: vertical-rl;
		font-size: 25rpx;
	}

	.info-voucher-right {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 25rpx;
		display: flex;
	}

	.info-voucher-right-title {
		width: 100%;
		padding: 0 20rpx;

		color: #828282;
	}

	.info-voucher-right-img {
		width: 250rpx;
		height: 250rpx;
	}

	.qr-code-box {
		padding: 20rpx 0;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.qr-code-box view {
		margin: 8rpx;
	}

	.ticket-info,
	.refund-policy {
		margin-top: 30rpx;
	}

	.ticket-title,
	.policy-title,
	.insurance-title,
	.booking-title,
	.attraction-info {
		font-size: 30rpx;
	}

	.policy-title,
	.ticket-address,
	.info-title,
	.insurance-title,
	.booking-right,
	.attraction-info {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.copy,
	.save-img,
	.details {
		color: #007aff;
	}

	.ticket-time,
	.ticket-address,
	.attraction-detail {
		font-size: 25rpx;
		color: #828282;
	}

	.policy-detail {
		width: 310rpx;
		color: #05b288;
		font-size: 25rpx;
		border-bottom: 2px solid #05b288;
	}

	.policy-detail1 {
		background-color: #05b288;
		color: #fff;
		padding: 5rpx;
		border-radius: 7rpx;
	}

	.booking-name,
	.booking-contact,
	.booking-contract {
		display: flex;
		font-size: 25rpx;
	}

	.booking-left {
		width: 150rpx;
		color: #828282;
	}

	.booking-right {
		flex: 1;
	}

	.attraction-info-img {
		width: 100rpx;
		height: 100rpx;
		border-radius: 10rpx;
		margin-right: 10rpx;
	}

	.attraction-title-box {
		display: flex;
		align-items: center;
	}

	.flex-space-between-btn {
		margin-top: 30rpx;
	}
</style>